<script setup>
import { QueryPageentryApi } from "@/api/warehousing_EntryB"
import { ref, onMounted } from "vue"

const form = ref({
  batchNumber: "",
})

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 分页相关属性
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const size = ref('small')
const disabled = ref(false)
const background = ref(true)

const search = async () => {
  try {
    const result = await QueryPageentryApi(
      currentPage.value,
      pageSize.value,
      form.value.batchNumber
    )
    tableData.value = result.data.list || []
    total.value = result.total || 0
  } catch (error) {
    console.error('查询失败:', error)
    tableData.value = []
    total.value = 0
  }
}

// 处理页面大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  pageSize4.value = val
  currentPage.value = 1
  currentPage4.value = 1
  search()
}

// 处理当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  currentPage4.value = val
  search()
}

// 添加功能
const add = () => {
  // 添加逻辑
  console.log('添加功能')
}

// 组件挂载时自动查询
onMounted(() => {
  search()
})
</script>

<template>
  <!--搜索栏-->
  <el-form :model="form" :inline="true" label-width="auto" style="max-width: 1000px">
    <el-form-item>
      <el-input v-model="form.batchNumber" placeholder="批次号" />
    </el-form-item>
    <el-button type="primary" @click="search">查询</el-button>
    <el-button type="primary" @click="add">增加</el-button>
  </el-form>

  <!--表格数据-->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="batchNumber" label="批次号" width="180" />
    <el-table-column prop="skuCode" label="商品编码" width="180" />
    <el-table-column prop="skuTitle" label="商品名称" />
    <el-table-column prop="skuId" label="规格编码" />
    <el-table-column prop="skuSpec" label="规格名称" />
    <el-table-column prop="consignorName" label="货主名称" />
    <el-table-column prop="supplierName" label="供应商名称" />
    <el-table-column prop="price" label="商品单价" />
    <el-table-column prop="totalWeight" label="总重量" />
    <el-table-column prop="totalVolume" label="总体积" />
  </el-table>
  
  <!--分页查询-->
  <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[10, 20, 30, 40]"
    :size="size"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<style>
/* 添加必要的样式 */
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
